走进前端 - Zong

「前端」英文称为: Front-End Developer

2016年9月，我开始准备走进前端，在此想分享一些我在学习过程中有趣的事情。

因为本身对C和C#有过接触，喜欢倒腾，所以学习过程还是蛮开心的，在这里我向大家推荐几本不错的书：《CSS权威指南》、《JavaScript权威指南》，我认为学习前端可以从这里入手。在阅读的过程中，我进行了第一次的自我练习，使用Sublime Text编写了一个静态而又简单的百度首页，当然在看这两本书之前，我是通过慕课网进行学习的，同时也进行了一些小的练习（当然那些的代码文件我已经删除了，因为我认为可读性很糟糕）。在完成百度首页后，我开始模仿制作小米的官网首页，在模仿小米官网首页的过程中，同样也使用了一些jQuery，它让我更高效的进行开发，并且慢慢的提高代码编写的可读性（有兴趣可以在我上传的项目中查看源码），也学习了一些有意思的CSS样式：

float:left/right; + clear:left/right/both; 可以解决一些错位bug
icon小图标并非需要image文件，CSS同样可以实现
transition: ; 可以使动画不那么生硬
rgba(R,G,B,Alpha); 可以让颜色有透明度

期间我用微博和Twitter关注了一些行业内的大牛以及有名的框架，只是很简单的了解了下他们：Bootstrap、jQuery、Node.js、Vue、AngularJS、React，同时也了解了下MVC的工作模式。有趣的事，我购买了一本郝老师的鸡汤书《技巧》，的确像网友所说的，这本书里都是鸡汤，但是千万别喝，读完这本书，我只领会到一句话：学习考方法，有想法就去做，其他就别信了。当然在模仿小米官网时，我已经开设了GitHub账号，已经可以使用Mac OS以及Ubuntu的git命令维护我的GitHub了，有机会我可以为大家分享下Ubuntu的使用小技巧。

在完成小米官网的模仿后，开始模仿京东官网的商品页面，开发工具改为：WebStorm，在这里我改善了一点，image文件我不再下载到本地，而是利用京东服务器，我认为这样可以提高客户的访问速度。模仿京东商品页面时，也学习了一些有趣的事：

可以使用 data-example 来设置数据，使用.data("example"); 来读写
设置 <body>{width: ;} 参数来解决小窗口页面破页bug
CSS 子元素选择器 > 在很多动画场景都能用到
对 z-index 、 position: relative/absolute/fixed; 有了一些新的认识，他们可以实现很多同一区域的动画效果

同时尝试自己编写了一个放大镜工具：

$("#goods-img-zoom").hover(
    function (event) {
        $("#goods-img-zoom").append('<div class="jqzoompup"></div>');
                //创建图片鼠标跟踪区域

        $(".goods-preview").append('<div class="imgzoomdiv"></div>');
                //创建放大镜显示区域

        $("#goods-img-zoom").mousemove(
            function (event) {
                var goods_img_zoom_jq_x = event.pageX - $("#goods-img-zoom").offset().left - 87.5;
                var goods_img_zoom_jq_y = event.pageY - $("#goods-img-zoom").offset().top - 87.5;
                if (goods_img_zoom_jq_x < 0) {goods_img_zoom_jq_x = 0;};
                if (goods_img_zoom_jq_x > 175) {goods_img_zoom_jq_x = 175;};
                if (goods_img_zoom_jq_y < 0) {goods_img_zoom_jq_y = 0;};
                if (goods_img_zoom_jq_y > 175) {goods_img_zoom_jq_y = 175;};
                    //控制鼠标移动的区域

                $(".jqzoompup").attr("style","top:" + goods_img_zoom_jq_y + "px; left:"+ goods_img_zoom_jq_x +"px;");
                    //根据鼠标移动位置动态调整区域位置

                $(".imgzoomdiv").attr("style","background:url(" + $("#goods-img-zoom img").attr("data-img") +") no-repeat; background-position:"+ -(goods_img_zoom_jq_x/175*400) + "px " + -(goods_img_zoom_jq_y/175*400) + "px;");
                    //根据跟踪区域显示放大镜内的区域
            }
        );
    },
    function () {
        $("#goods-img-zoom .jqzoompup").remove();
        $(".imgzoomdiv").remove();
                //鼠标移开消失
    }
);

更多其他代码可以前往我的GitHub查看。因为时隔几个月，感谢Github帮助我回忆之前学习到的内容，更细的内容可以查看更新Commits。需要提到一点，我的主页是使用Bootstrap制作的。将来的项目中，我会将更细内容写的更加具体，让我可以更好地总结和分享给大家。